<div class="content-section introduction">
    <div class="feature-intro">
        <h1>Password</h1>
        <p>Password displays strength indicator for password fields.</p>
    </div>
    <app-demoActions github="password" stackblitz="password-demo"></app-demoActions>
</div>

<div class="content-section implementation">
    <div class="card">
        <h5>Basic</h5>
        <p-password [(ngModel)]="value1" [feedback]="false"></p-password>

        <h5>Password Meter</h5>
        <p-password [(ngModel)]="value2"></p-password>

        <h5>Show Password</h5>
        <p-password [(ngModel)]="value3" [toggleMask]="true"></p-password>

        <h5>Templating</h5>
        <p-password [(ngModel)]="value4">
            <ng-template pTemplate="header">
                <h6>Pick a password</h6>
            </ng-template>
            <ng-template pTemplate="footer">
                <p-divider></p-divider>
                <p class="mt-2">Suggestions</p>
                <ul class="pl-2 ml-2 mt-0" style="line-height: 1.5">
                    <li>At least one lowercase</li>
                    <li>At least one uppercase</li>
                    <li>At least one numeric</li>
                    <li>Minimum 8 characters</li>
                </ul>
            </ng-template>
        </p-password>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Documentation">
            <h5>Import</h5>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;PasswordModule&#125; from 'primeng/password';
</app-code>

            <h5>Getting Started</h5>
            <p>Component is defined using p-password element with a mask and two-way value binding is enabled with standard ngModel directive.</p>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;input type="password" pPassword /&gt;
&lt;p-password&gt;&lt;/p-password&gt;
</app-code>

            <h5>Model Binding</h5>
            <p>A model can be bound using standard ngModel directive.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-password [(ngModel)]="value1"&gt;&lt;/p-password&gt;
</app-code>

            <h5>Customization</h5>
            <p>Password component uses regular expressions for middle and strong passwords with the following defaults.</p>

            <h6>Medium</h6>
            <p><i>^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.&#123;6,&#125;).</i></p>
            <ul>
                <li>At least one lowercase</li>
                <li>At least one uppercase or one number</li>
                <li>Minimum 6 characters</li>
            </ul>

            <h6>Strong</h6>
            <p><i>^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.&#123;8,&#125;)</i></p>
            <ul>
                <li>At least one lowercase</li>
                <li>At least one uppercase</li>
                <li>At least one numeric</li>
                <li>Minimum 8 characters</li>
            </ul>

            <p>It is possible to define your own checks with the <i>mediumRegex</i> and <i>strongRegex</i> properties.</p>

            <h5>Templating</h5>
            <p>3 templates are included to customize the overlay. These are <i>header</i>, <i>content</i> and <i>footer</i>. Note that content overrides the default meter.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-password [(ngModel)]="value4"&gt;
    &lt;ng-template pTemplate="header"&gt;
        &lt;h6&gt;Pick a password&lt;/h6&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="footer"&gt;
        &lt;p-divider&gt;&lt;/p-divider&gt;
        &lt;p class="mt-2"&gt;Suggestions&lt;/p&gt;
        &lt;ul class="pl-2 ml-2 mt-0" style="line-height: 1.5"&gt;
            &lt;li&gt;At least one lowercase&lt;/li&gt;
            &lt;li&gt;At least one uppercase&lt;/li&gt;
            &lt;li&gt;At least one numeric&lt;/li&gt;
            &lt;li&gt;Minimum 8 characters&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/ng-template&gt;
&lt;/p-password&gt;
</app-code>

            <h5>Properties</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>promptLabel</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Text to prompt password entry. Defaults to PrimeNG <a href="#" [routerLink]="['/i18n']">I18N API</a> configuration.</td>
                        </tr>
                        <tr>
                            <td>mediumRegex</td>
                            <td>string</td>
                            <td>Regex for a medium level password.</td>
                            <td>^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.&#123;6,&#125;).</td>
                        </tr>
                        <tr>
                            <td>strongRegex</td>
                            <td>string</td>
                            <td>Regex for a strong level password.</td>
                            <td>^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.&#123;8,&#125;)</td>
                        </tr>
                        <tr>
                            <td>weakLabel</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Text for a weak password. Defaults to PrimeNG <a href="#" [routerLink]="['/i18n']">I18N API</a> configuration.</td>
                        </tr>
                        <tr>
                            <td>mediumLabel</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Text for a medium password. Defaults to PrimeNG <a href="#" [routerLink]="['/i18n']">I18N API</a> configuration.</td>
                        </tr>
                        <tr>
                            <td>strongLabel</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Text for a strong password. Defaults to PrimeNG <a href="#" [routerLink]="['/i18n']">I18N API</a> configuration.</td>
                        </tr>
                        <tr>
                            <td>feedback</td>
                            <td>boolean</td>
                            <td>true</td>
                            <td>Whether to show the strength indicator or not.</td>
                        </tr>
                        <tr>
                            <td>toggleMask</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Whether to show an icon to display the password as plain text.</td>
                        </tr>
                        <tr>
                            <td>appendTo</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Id of the element or "body" for document where the overlay should be appended to.</td>
                        </tr>
                        <tr>
                            <td>inputStyle</td>
                            <td>any</td>
                            <td>null</td>
                            <td>Inline style of the input field.</td>
                        </tr>
                        <tr>
                            <td>inputStyleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the input field.</td>
                        </tr>
                        <tr>
                            <td>inputId</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Identifier of the accessible input element.</td>
                        </tr>
                        <tr>
                            <td>style</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the component.</td>
                        </tr>
                        <tr>
                            <td>styleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the component.</td>
                        </tr>
						<tr>
							<td>placeholder</td>
							<td>string</td>
							<td>null</td>
							<td>Advisory information to display on input.</td>
						</tr>
                        <tr>
                            <td>label</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Label of the input for accessibility.</td>
                        </tr>
                        <tr>
                            <td>ariaLabel</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Defines a string that labels the input for accessibility.</td>
                        </tr>
                        <tr>
                            <td>ariaLabelledBy</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Specifies one or more IDs in the DOM that labels the input field.</td>
                        </tr>
                        <tr>
                            <td>showClear</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When enabled, a clear icon is displayed to clear the value.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Events</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>onBlur</td>
                            <td>event: Blur event
                            </td>
                            <td>Callback to invoke on blur of input field.</td>
                        </tr>
                        <tr>
                            <td>onFocus</td>
                            <td>event: Focus event
                            </td>
                            <td>Callback to invoke on focus of input field.</td>
                        </tr>
                        <tr>
                            <td>onClear</td>
                            <td>-</td>
                            <td>Callback to invoke when input field is cleared.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Templates</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>header</td>
                            <td>-</td>
                        </tr>
                        <tr>
                            <td>content</td>
                            <td>-</td>
                        </tr>
                        <tr>
                            <td>footer</td>
                            <td>-</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Styling</h5>
            <p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming page</a>.</p>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Element</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>p-password-panel</td>
                            <td>Container of password panel</td>
                        </tr>
                        <tr>
                            <td>p-password-meter</td>
                            <td>Meter element of password strength</td>
                        </tr>
                        <tr>
                            <td>p-password-info</td>
                            <td>Text to display strength</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Dependencies</h5>
            <p>None.</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/password" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-password-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div class="card"&gt;
    &lt;h5&gt;Basic&lt;/h5&gt;
    &lt;p-password [(ngModel)]="value1" [feedback]="false"&gt;&lt;/p-password&gt;

    &lt;h5&gt;Password Meter&lt;/h5&gt;
    &lt;p-password [(ngModel)]="value2"&gt;&lt;/p-password&gt;

    &lt;h5&gt;Show Password&lt;/h5&gt;
    &lt;p-password [(ngModel)]="value3" [toggleMask]="true"&gt;&lt;/p-password&gt;

    &lt;h5&gt;Templating&lt;/h5&gt;
    &lt;p-password [(ngModel)]="value4"&gt;
        &lt;ng-template pTemplate="header"&gt;
            &lt;h6&gt;Pick a password&lt;/h6&gt;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="footer"&gt;
            &lt;p-divider&gt;&lt;/p-divider&gt;
            &lt;p class="mt-2"&gt;Suggestions&lt;/p&gt;
            &lt;ul class="pl-2 ml-2 mt-0" style="line-height: 1.5"&gt;
                &lt;li&gt;At least one lowercase&lt;/li&gt;
                &lt;li&gt;At least one uppercase&lt;/li&gt;
                &lt;li&gt;At least one numeric&lt;/li&gt;
                &lt;li&gt;Minimum 8 characters&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/ng-template&gt;
    &lt;/p-password&gt;
&lt;/div&gt;
</app-code>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
@Component(&#123;
    templateUrl: './passworddemo.html',
    styles: [`
        :host ::ng-deep .p-password input &#123;
            width: 15rem
        &#125;
    `]
&#125;)
export class PasswordDemo &#123;

    value1: string;

    value2: string;

    value3: string;

    value4: string;
&#125;
</app-code>

        </p-tabPanel>
        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-password-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
    </p-tabView>
</div>
